<template>
  <view class="order-group">
    <view class="group-top">
      <view class="top-l">商城订单</view>
      <view class="top-r" @click="onClickTop">
        <text>
          全部订单
        </text>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="order-group__content">
      <view class="order-group__item" v-for="(item, index) in orderTagInfos" :key="index" @click="onClickItem(item.tabType)">
        <view class="order-group__item__icon">
          <u-badge type="error" max="99" :value="item.orderNum" shape="circle" class="badge" :absolute="true" :offset="[-8,-4]"></u-badge>
          <image :src="item.iconName" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
            style="width: 50rpx;height: 48rpx;" />
        </view>
        <view class="order-group__item__title">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    orderTagInfos: {
      type: Array,
      value: [],
    },
    title: {
      type: String,
      value: '商城订单',
    },
    desc: {
      type: String,
      value: '全部订单',
    },
    isTop: {
      type: Boolean,
      value: true,
    },
    classPrefix: {
      type: String,
      value: 'wr',
    },
  },
  data() {
    return {

    }
  },
  onLoad(){
    console.log(this.orderTagInfos)
  },
  methods: {
    onClickItem(tabType) {
      this.$emit('onClickItem', tabType);
    },

    onClickTop() {
      this.$emit('onClickTop');
    },
  },
}
</script>
<style scoped>
.group-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}

.group-top .top-l {
  font-size: 36rpx;
  font-weight: 500;
}

.group-top .top-r {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.order-group {
  margin-bottom: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx 16rpx 0 0;
}

.order-group .order-group__top {
  padding: 24rpx 18rpx 24rpx 32rpx;
  border-radius: 16rpx 16rpx 0 0;
}

.order-group__top___title {
  font-size: 32rpx;
  line-height: 48rpx;
  font-weight: bold;
}

.order-group__top__note {
  font-size: 24rpx !important;
  color: #333 !important;
}

.order-group__content {
  overflow: hidden;
  width: 100%;
  height: 164rpx;
  display: flex;
  background-color: #fff;
  border-radius: 0 0 16rpx 16rpx;
}

.order-group__item {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.order-group__item:first-child {
  border-radius: 0 0 0 16rpx;
}

.order-group__item:last-child {
  border-radius: 0 0 16rpx 0;
}

.order-group__item__title {
  font-size: 30rpx;
   color: #333; 
  line-height: 28rpx;
}

.order-group__item__icon {
  margin-bottom: 20rpx;
  width: 56rpx;
  height: 56rpx;
  position: relative;
}

.order-group__item__icon .badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  z-index: 999999;
}


.order-group__top__title {
  font-weight: bold !important;
  font-size: 32rpx !important;
}

.order-group .order-group__left {
  margin-right: 0;
}
</style>